<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 先引入 Vue -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<title>element组件2</title>
<style>

.el-row{
margin-top:20px;
margin-bottom: 20px;

}
.el-col{
border-radius: 4px;
}
.content{
border-radius: 4px;
color:wheat;
text-align: center;
line-height: 50px;
background: #7f6a2c;
min-height: 50px;
}

</style>

</head>
<body>
<div id="app">
	<template v-for="(group,i) in groups">
		<el-row :gutter="5">
		
		<el-col v-for="student in group" :span=" parseInt(24/group.length)">
			<div class="content">{{student}}</div></el-col>
		</el-row>
		
		<el-button type="primary" @click="add(i)">添加学生</el-button>

	</template>

</div>
<script>
new Vue({
el:'#app',
data:{
groups:[['张三','李四','王五'],['张三','李四','王五'],['张三','李四','王五']],
},

methods:{
add:function(i){
	// console.log(i);
	//点哪个按钮就加哪里的学生.
		var student=prompt('请输入新学生的姓名');
		this.groups[i].push(student);

}

}

})

</script>
</body>
</html>
